/*
 * @Author: taiyunhang
 * @Date: 2019-01-11 09:16:50
 * */

<template>
  <div class="v-container">
    <v-header title="登录">
      <span class="back" @click="goBack">
        <i class="el-icon-arrow-left"></i>返回
      </span>
    </v-header>
    <div class="v-main">
      <div class="login-box">
        <div class="login-title">请输入登录信息</div>
        <ul class="itemList">
          <li>
            <mt-field label="银行卡号：" placeholder="请输入您的银行卡号" v-model="cardNo"></mt-field>
          </li>
          <li>
            <mt-field label="手机号：" placeholder="请输入手机号" v-model="telphone"></mt-field>
          </li>
          <li v-if="showvCode">
            <mt-field label="图形验证码：" placeholder="请输入图形验证码" v-model="vCode">
              <img :src="vCodeImg" width="80" alt="图形验证码" @click="updateCode">
            </mt-field>
          </li>
          <li>
            <mt-field label="验证码：" placeholder="请输入验证码" v-model="dCode">
              <count-down ref="countDown" val="发送验证码" :count="120" v-on:do-count="sendCode"></count-down>
            </mt-field>
          </li>
        </ul>
      </div>
      <div class="submit-box">
        <mt-button class="my-button hot-button round" @click="login()">登录</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
import vHeader from '@/components/Header.vue';
import countDown from '@/components/CountDown.vue';
import { Toast } from 'mint-ui';
import { Resource } from '@/services/resource';
import Cookies from 'js-cookie';
import { staticPath } from '@/env';

export default {
  name: 'login',
  components: {
    vHeader,
    countDown
  },
  data() {
    return {
      showvCode: false,
      cardNo: '',
      telphone: '',
      dCode: '',
      vCode: null,
      vCodeImg: ''
    };
  },
  methods: {
    // 发送验证码
    sendCode() {
      let reg = new RegExp('^[0-9]*$');
      if (this.cardNo === '') {
        Toast({
          message: '银行卡号不能为空',
          position: 'bottom'
        });
      } else if (this.cardNo.length < 6 || this.cardNo.length > 20 || !reg.test(this.cardNo)) {
        Toast({
          message: '银行卡无效',
          position: 'bottom'
        });
      } else if (this.telphone === '') {
        Toast({
          message: '手机号不能为空',
          position: 'bottom'
        });
      } else if (!/^1\d{10}$/i.test(this.telphone)) {
        Toast({
          message: '手机号码不符合要求',
          position: 'bottom'
        });
      } else {
        this.$refs.countDown.isDisabled = true;
        Resource.getCheckCode
          .post({}, { cardNo: this.cardNo, telphone: this.telphone, vCode: this.vCode })
          .then(res => {
            this.$refs.countDown.setRemainTime();
            Toast({
              message: '发送成功',
              iconClass: 'el-icon-success'
            });
            console.log(res);
          })
          .catch(err => {
            this.$refs.countDown.isDisabled = false;
            console.log(err);
          });
      }
    },
    // 登录
    login() {
      let reg = new RegExp('^[0-9]*$');
      if (this.cardNo === '') {
        Toast({
          message: '银行卡号不能为空',
          position: 'bottom'
        });
      } else if (this.cardNo.length < 6 || this.cardNo.length > 20 || !reg.test(this.cardNo)) {
        Toast({
          message: '银行卡无效',
          position: 'bottom'
        });
      } else if (this.telphone === '') {
        Toast({
          message: '手机号不能为空',
          position: 'bottom'
        });
      } else if (!/^1\d{10}$/i.test(this.telphone)) {
        Toast({
          message: '手机号码不符合要求',
          position: 'bottom'
        });
      } else if (this.dCode === '') {
        Toast({
          message: '验证码不能为空',
          position: 'bottom'
        });
      } else {
        Resource.login.post({}, { card: this.cardNo, telephone: this.telphone, checkCode: this.dCode }).then(res => {
          let { matrixContent } = res.user;
          Cookies.set('token', matrixContent, { expires: 90, path: staticPath });
          this.$store.dispatch('login', matrixContent);
          if (this.$route.query.redirect) {
            this.$router.replace({ path: this.$route.query.redirect });
          } else {
            this.$router.replace('home');
          }
        });
      }
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    // 更新图形验证码
    updateCode() {
      Resource.getRandomVCode
        .get({ time: new Date().getTime() }, { responseType: 'blob' })
        .then(res => {
          const myBlob = res;
          this.vCodeImg = URL.createObjectURL(myBlob);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  mounted() {
    // this.updateCode();
  }
};
</script>

<style lang="less" scoped>
@import url('./login.less');
</style>
